<template>
  <div ref="modal" class="modal">
    <a-modal
      v-model="dialogVisible"
      :width="width"
      :footer="null"
      :maskClosable="false"
      :getContainer="() => $refs.modal"
      @cancel="cancel"
    >
      <div class="my-dialog__box">
        <slot name="dialogBox"></slot>
      </div>
      <template slot="closeIcon">
        <img src="@/assets/home/err.png" />
      </template>
      <template slot="title">
        <div class="title-box">
          <div class="in-box">
            <img class="jiao" src="@/assets/home/jiao.png" /><img class="img" src="@/assets/home/title.png" />{{
              title
            }}
          </div>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 1000
    }
  },
  watch: {
    visible(nl) {
      this.dialogVisible = nl;
    }
  },
  data() {
    return {
      dialogVisible: this.visible
    };
  },
  methods: {
    cancel() {
      this.$emit('handleCancel');
    }
  }
};
</script>

<style scoped lang="scss">
.modal ::v-deep .ant-modal-content {
  background: rgba(2, 28, 46, 1);
  color: #fff;
  box-shadow: 0px 0px 6px #1666f0;
}
.modal ::v-deep .ant-modal-header {
  padding: 0;
}
.modal ::v-deep .ant-modal-header {
  background: linear-gradient(90deg, rgba(22, 102, 240, 0.2) 0%, rgba(59, 150, 255, 0) 100%) !important;
  color: #fff;
  border-bottom: none;
}
.modal ::v-deep .ant-modal-title {
  color: #fff;
}
.title-box {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  padding: 4px 8px;
  background: rgba(22, 102, 240, 0.2);
  border-radius: 4px;

  .in-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    background: linear-gradient(90deg, rgba(22, 102, 240, 0.2) 0%, rgba(59, 150, 255, 0) 100%);
    padding-left: 16px;
    .jiao {
      position: absolute;
      left: -5px;
      top: -5px;
      width: 20px;
      height: 20px;
    }
    .img {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
</style>
